<ion-header translucent>
  <ion-toolbar>
      <ion-buttons slot="start" (click)="gotohome()">
          <ion-icon name="arrow-back"></ion-icon>
      </ion-buttons>
    <ion-title>floating</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen padding>
   <h1>ion-fab-button</h1>
   <ion-fab-button>Default</ion-fab-button>
   <h3>属性</h3>
   <div>
     <p>activated="true" (如果为true，则按钮将显示一个关闭图标。)</p>
     <ion-fab-button activated="true">Default</ion-fab-button>
   </div>
   <div>
      <p>color="primary" |  "secondary" | "tertiary" ... (按钮颜色的选择)</p>
      <ion-fab-button color="primary">Primary</ion-fab-button>
      <ion-fab-button color="secondary">Secondary</ion-fab-button>
      <ion-fab-button color="danger">Danger</ion-fab-button>
   </div>
   <div>
      <p>disabled="true" (如果为true，则用户无法与按钮交互。)</p>
      <ion-fab-button disabled="true">Primary</ion-fab-button>
   </div>
   <div>
      <p>mode="ios" | "md" (选择安卓或者ios风格)</p>
      <ion-fab-button mode="md">md</ion-fab-button>
   </div>
   <div>
      <p>size="small" (设置按钮为小尺寸)</p>
      <ion-fab-button size="small">Primary</ion-fab-button>
   </div>
   <div>
      <p>translucent="true" (如果为true，按钮将是半透明的)</p>
      <ion-fab-button translucent="true">Primary</ion-fab-button>
   </div>

   <h1>ion-fab-list</h1>
   <h3>属性</h3>
   <div class="pd20">
     <p>side="bottom" | "end" | "start" | "top" (fablist将显示的方向)</p>
     <ion-fab>
        <ion-fab-button>Share</ion-fab-button>
        <ion-fab-list side="end">
          <ion-fab-button>A</ion-fab-button>
          <ion-fab-button>B</ion-fab-button>
          <ion-fab-button>C</ion-fab-button>
        </ion-fab-list>
      </ion-fab>
   </div>

   <h1>ion-fab</h1>
   <h3>属性</h3>
   <div class="pd20"> 
     <p>activated="true"  (如果为true,则fab内的按钮将呈现展示状态)</p>
     <ion-fab activated=“true”>
        <ion-fab-button>Share</ion-fab-button>
        <ion-fab-list side="end">
          <ion-fab-button>A</ion-fab-button>
          <ion-fab-button>B</ion-fab-button>
          <ion-fab-button>C</ion-fab-button>
        </ion-fab-list>
      </ion-fab>
   </div>
   <div>
      <p>edge="true"  (如果为true，则如果vertical是“top”，则fab将显示在标题的边缘，如果是“bottom”，则将显示在页脚的边缘。 应与slot="fixed"一起使用)</p>
      <ion-fab horizontal="end" vertical="top" slot="fixed" edge="true">
          <ion-fab-button>
            <ion-icon name="add"></ion-icon>
          </ion-fab-button>
      </ion-fab>      
   </div>
   <div>
      <p>horizontal="center" | "end" | "start"  (水平线上的对齐)</p>
   </div>
   <div>
      <p>vertical="bottom" | "center" | "top"  (垂直线上的对齐)</p>
   </div>
</ion-content>
